<template>
  <div class="buy-ticket-box">
    <div class="top">
      <div class="top-item" :class="{active: flag1}">
        <div class="top-item-content">
          乘客信息
        </div>
      </div>
      <span>&nbsp;</span>
      <div class="top-item" :class="{active: flag2}">
        <div class="top-item-content">
          订单支付
        </div>
      </div>
      <span>&nbsp;</span>
       <div class="top-item" :class="{active: flag3}">
        <div class="top-item-content">
          完成支付
        </div>
      </div>
    </div>
    <div class='content'>
			<passenger-inf v-if="status1" @next1="next1" @getOrder="getOrder"></passenger-inf>
			<pay-order v-else-if="status2" @next2="next2" :money="order.totalPrice" :order="order"></pay-order>
		  <complete v-else-if="status3"></complete>
    </div>
    <button @click="logout"></button>
    <login-and-out></login-and-out>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue';
import store from '@/store';
import router from '@/router';
import PassengerInf from '@/components/BuyTicket/PassengerInf/index.vue';
import PayOrder from '@/components/BuyTicket/PayOrder.vue';
import Complete from '@/components/BuyTicket/Complete.vue';
import loginAndOut from '@/components/LoginAndOut.vue';

export default defineComponent({
  components: {
		PassengerInf,
    PayOrder,
    Complete,
    loginAndOut,
  },
	setup() {
		//顶部进程标志
    let flag1 = ref(true);
    let flag2 = ref(false);
    let flag3 = ref(false);
		//买票各个阶段的标志
    let status1 = ref(true);
    let status2 = ref(false);
    let status3 = ref(false);
		//传给子组件的方法
		const next1 = () => {
			flag2.value = true;
			status1.value = false;
			status2.value = true;
		}
		const next2 = () => {
			flag3.value = true;
			status2.value = false;
			status3.value = true;
		}
    const order = ref(null);
    const getOrder = (newOrder: Object) => {
      (order.value as any) = newOrder;
      console.log(order.value);
    }
    const logout = () => {
      store.commit('logout');
    }
    return {
      flag1,
      flag2,
      flag3,
			status1,
			status2,
			status3,
      next1,
      next2,
      getOrder,
      order,
      logout
    };
  },
  computed: {
    isLogin() {
      return store.state.userInfo.isLogin;
    }
  },
  watch: {
      isLogin(newValue,oldValue) { 
        if (!newValue && oldValue ) {
          router.push('main');
        }
      }
  },

});
</script>
<style lang="scss" scoped>
	@import '@/assets/css/config.scss';
  div.buy-ticket-box{
	  width: 1100px;
    padding: 0px 45px 50px 45px ;
    background: white;
	  border-radius: 10px;
  }
  div.top{
    margin-bottom: 50px;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: $themeLightGray;
    padding-bottom: 5px;
    text-align: right;
  }
  .top-item.active{
    background: $themeColor;
  }
  div.top-item{
    height: 40px;
    width: 110px;
    text-align: center;
    background: $themeGray;
    transform: skewX(-30deg);
    vertical-align: middle;
    display: inline-block;
  }
  div.top-item-content{
    font-size: 16px;
    color: white;
    padding-top: 10px;
    transform: skewX(30deg);
  }
   :deep(.el-input__inner){
    letter-spacing: 1px;
  }
</style>

